<script setup lang="ts">
import { onMounted, ref } from 'vue';
import router from '@/router';
import Input from '@/components/common/Input.vue';
import Button from '@/components/common/Button.vue';
import Modal from '@/components/common/Modal.vue';
import { sendLoginCode } from '@/apis/user';
import { RegisterType } from '@/enums/user'
const mobilePhoneError = ref<boolean>(false)
const passwordError = ref<boolean>(false)
const password = ref<string>('')
const mobilePhoneErrorText = ref<string>('')
const passwordErrorText = ref<string>('')
const mobilePhoneOrEmail = ref<string>('')
const submitStatus = ref<boolean>(false)
const modalVisible = ref<boolean>(false)

const focusFn = () => {
    mobilePhoneErrorText.value = ''
    passwordError.value = false
    submitStatus.value = false
    mobilePhoneError.value = false
}
const submit = async () => {
    submitStatus.value = true
    const isEmail = (str: string): boolean => {
        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        return emailRegex.test(str);
    };
    const isPhoneNumber = (str: string): boolean => {
        const phoneRegex = /^1[3-9]\d{9}$/;
        return phoneRegex.test(str);
    };
    const inputValue = mobilePhoneOrEmail.value;
    if (!isEmail(inputValue) && !isPhoneNumber(inputValue)) {
        return mobilePhoneError.value = true;
    }
    if (!isEmail(inputValue) && !isPhoneNumber(inputValue)) {
        mobilePhoneError.value = true;
    }
    if (!/^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,16}$/.test(password.value)) {
        passwordError.value = true;
    }
    // if (mobilePhoneError.value || passwordError.value) {
    //     return
    // }
    const registerType = isEmail(inputValue) ? RegisterType.Email : RegisterType.Phone;
    try {
        await sendLoginCode({ tel: mobilePhoneOrEmail.value, password: password.value });
        router.push({
            path: '/login/verification',
            query: {
                type: registerType,
                mobilePhoneOrEmail: mobilePhoneOrEmail.value,
                password: password.value
            }
        });
    } catch (error: any) {
        passwordError.value = true;
        // modalVisible.value = true;
        passwordErrorText.value = error.msg;
    }
};
const registerFn = () => {
    router.push({
        path: '/register',
    });
}
onMounted(() => {
    mobilePhoneOrEmail.value = router.currentRoute.value.query.mobilePhoneOrEmail as string;
})
</script>
<template>
    <div class=" min-h-[100vh] overflow-auto flex flex-col justify-between sm:items-center">
        <div class="sm:flex justify-center flex-col items-center">
            <div class="sm:px-[24px] sm:pt-[80px] sm:pb-[26px] w-full sm:w-[425px] sm:h-[calc(100%-80px-48px-140px)]">
                <form>
                    <div
                        class="sm:border-solid sm:h-[100%] sm:border-[1px] h-[calc(100%-200px)] sm:border-[#EDEDED] dark:sm:border-[#333B47] sm:rounded-[24px] sm:p-[40px] w-[100%] box-border px-[24px] pt-[8px]">
                        <div class="h-[28px] mb-[20px] sm:mb-[32px] mt-[20px] sm:mt-0">
                            <span class="iconfont text-[24px] cursor-pointer text-primary-400 icon-uhx"></span>
                            <span class="text-primary-400 text-[24px] ml-[8px] font-bold">UHX</span>
                        </div>
                        <div class="sm:text-[32px] text-[28px] font-bold mb-[28px] sm:mb-[32px] dark:text-[#EAECEF]">登录
                        </div>
                        <div
                            class="text-[14px] text-[#909090] sm:text-black dark:sm:text-[#EAECEF] dark:text-[#848E9C]">
                            邮箱/手机号码</div>
                        <Input autocomplete="username" @focus="focusFn" v-model="mobilePhoneOrEmail"
                            class="mt-[6px] tracking-[2px]" placeholder="邮箱/手机号码"
                            :class="[mobilePhoneError ? 'border-[#F6465D]' : 'border-[#EDEDED]']" />
                        <div
                            class="text-[14px] mt-[10px] text-[#909090] sm:text-black dark:sm:text-[#EAECEF] dark:text-[#848E9C]">
                            登录密码</div>
                        <Input @focus="focusFn" autocomplete="new-password" v-model="password" type="password"
                            class="mt-[6px] tracking-[2px]" placeholder="登录密码"
                            :class="[passwordError ? 'border-[#F6465D]' : 'border-[#EDEDED]']" />
                        <div class="text-[#F6465D] text-[12px] sm:text-[14px] mt-[4px]"
                            :class="[passwordError ? 'block' : 'hidden']">{{ passwordErrorText || `请输入
                            8-16位密码，需同时包含字母和数字`}}</div>
                        <div class="text-[#F6465D] text-[12px] sm:text-[14px] mt-[4px]"
                            :class="[mobilePhoneError ? 'block' : 'hidden']">{{ mobilePhoneErrorText ||
                                '请输入有效的邮箱或手机号。手机号不得包含空格或特殊字符。' }}</div>
                        <Button class="mt-[24px] h-[48px] leading-[48px] text-[16px]" @click="submit">继续</Button>
                        <div class="flex items-center justify-between my-[16px]">
                            <div class="h-[1px] bg-[#ededed] dark:bg-[#303846] w-[42%]"></div>
                            <div class="text-[14px] dark:text-[#EAECEF]">或</div>
                            <div class="h-[1px] bg-[#ededed] dark:bg-[#303846] w-[42%]"></div>
                        </div>
                        <Button
                            class="dark:bg-dark-bg dark:border-[#303846] dark:text-[#EAECEF] active:bg-white h-[46px] leading-[46px] text-[16px] bg-white border-solid border-[1px] sm:border-[#ddd] border-[#EDEDED] text-[#9c9c9c]">
                            <div class=" relative">通过Google继续
                                <span class=" absolute left-[10px]">
                                    <svg class="icon" aria-hidden="true">
                                        <use xlink:href="#icon-guge"></use>
                                    </svg>
                                </span>
                            </div>
                        </Button>
                        <Button
                            class="dark:bg-dark-bg dark:border-[#303846] dark:text-[#EAECEF] mt-[24px] active:bg-white h-[46px] leading-[46px] text-[16px] bg-white border-solid border-[1px] sm:border-[#ddd] border-[#EDEDED] text-[#9c9c9c]">
                            <div class=" relative">通过Apple继续
                                <span class=" absolute left-[10px] iconfont icon-pingguo">
                                </span>
                            </div>
                        </Button>
                        <Button
                            class="dark:bg-dark-bg dark:border-[#303846] dark:text-[#EAECEF] mt-[24px] active:bg-white h-[46px] leading-[46px] text-[16px] bg-white border-solid border-[1px] sm:border-[#ddd] border-[#EDEDED] text-[#9c9c9c]">
                            <div class=" relative">通过Telegram继续
                                <span class=" absolute left-[10px]">
                                    <svg class="icon" aria-hidden="true">
                                        <use xlink:href="#icon-telegram"></use>
                                    </svg>
                                </span>
                            </div>
                        </Button>
                    </div>
                </form>
            </div>
            <div @click="registerFn"
                class="mt-[20px] sm:mt-0 h-[44px] px-[24px] active:text-primary-300 select-none text-primary-500 text-[16px] font-bold cursor-pointer sm:hover:text-primary-300">
                创建UHX账户</div>
        </div>
        <div
            class="h-[70px] sm:w-[345px] w-full box-border flex items-center sm:px-0 justify-between px-[60px] text-[14px] text-[#909090]">
            <div class="flex items-center">
                <span class="iconfont icon-yuyan text-black"></span>
                <div class="ml-[6px]">简体中文</div>
            </div>
            <div>服务协议</div>
            <div>隐私声明</div>
        </div>
        <Modal :visible="modalVisible" @close="modalVisible = false" @cancel="modalVisible = false">
            <div class="sm:w-[380px] w-[300px] px-[24px] py-[16px] pb-[6px]">
                <div class="text-center mb-[10px]">
                    <span class="text-[60px]">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-tishi"></use>
                        </svg>
                    </span>
                </div>
                <div class="w-full text-center sm:text-[20px] text-[18px] font-bold mb-[8px]">已经存在账户</div>
                <div class="text-[14px]">账号已经存在，请登录后继续。</div>
            </div>
            <template #footer>
                <div class="flex justify-between w-full box-border gap-[10px] sm:flex-col">
                    <Button class="w-full box-border h-[40px] leading-[40px]">登录</Button>
                    <Button type="default" class="w-full  box-border h-[40px] leading-[40px]">取消</Button>
                </div>
            </template>
        </Modal>
    </div>
</template>
<style scoped></style>